<template>
  <div>
    <el-drawer
      ref="drawer"
      :title="title"
      :visible.sync="isDrawer"
      direction="rtl"
      custom-class="demo-drawer"
      size="50%"
      @close="onClose"
    >
      <el-form ref="ruleForm" :model="formData" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属小区" prop="community_code">
              <el-select v-model="formData.community_code" placeholder="请输入" @change="getChangeComExp">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费项目" prop="project_code">
              <el-select v-model="formData.project_code" placeholder="请输入">
                <el-option v-for="item in project" :key="item.id" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属楼栋" prop="building_code">
              <el-select v-model="formData.building_code" placeholder="请输入" @change="getliftChange">
                <el-option v-for="item in lift" :key="item.id" :label="item.lift" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属房产" prop="house_code">
              <el-select v-model="formData.house_code" placeholder="请输入">
                <el-option v-for="item in houseArr" :key="item.id" :label="item.name" :value="item.building_code" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="应收金额" prop="amount_paid">
              <el-input v-model="formData.amount_paid" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实收金额" prop="amount_total">
              <el-input v-model="formData.amount_total" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注" prop="amount_total">
          <textarea id="" v-model="formData.remark" name="" cols="30" rows="10" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>

  </div>
</template>

<script>
import { getExpensesByComIdApi, getProjectApi, getCommunityApi, getBuildingApi, getBuildingCodeApi, getAddIndexApi, getUpdataIndexApi } from '@/api/expenses'
export default {
  name: 'VueAdminTemplateMasterAddForm',
  data() {
    return {
      options: [],
      houseArr: [],
      project: [],
      isDrawer: false,
      lift: [],
      formData: {
        building_code: '',
        house_code: '',
        project_code: '',
        amount_total: '',
        amount_paid: '',
        remark: '',
        community_code: ''
      },
      rules: {
        // house_code: [{ required: true, message: '请输入', trigger: 'blur' }], // 所属房产
        // building_code: [{ required: true, message: '请输入', trigger: 'blur' }], // 所属楼栋
        project_code: [{ required: true, message: '请输入', trigger: 'blur' }], // 收费项目
        amount_paid: [{ required: true, message: '请输入', trigger: 'blur' }], // 应收金额
        amount_total: [{ required: true, message: '请输入', trigger: 'blur' }], // 实收金额
        remark: [{ required: true, message: '请输入', trigger: 'blur' }], // 备注
        community_code: [{ required: true, message: '请输入', trigger: 'blur' }]// 所在小区
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改收费明细' : '新增收费明细'
    }
  },
  created() {
    this.initData()
  },
  mounted() {

  },

  methods: {
    getliftChange() {
      this.lift = []
      this.liftChange()
    },
    async  getChangeComExp(val) {
      this.$set(this.formData, 'building_code', '')
      this.$set(this.formData, 'project_code', '')
      this.$set(this.formData, 'house_code', '')
      this.houseArr = []
      this.project = []
      this.lift = []
      this.getComExp(val)
    },
    // 获取新增小区的数据
    // 调用小区名称的数据
    async initData() {
      const { data } = await getCommunityApi()
      // console.log(data)
      this.options = data.data
      // console.log(this.options)
    },

    async  submitForm() {
      this.formData.id ? await getUpdataIndexApi(this.formData) : await getAddIndexApi(this.formData)
      this.$parent.getList()
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      this.isDrawer = false
    },
    onClose() {
      this.formData = {
        building_code: '',
        house_code: '',
        project_code: '',
        amount_total: '',
        amount_paid: '',
        remark: '',
        community_code: ''
      }
      this.isDrawer = false
    },
    // 根据小区名称获取收费项
    async getComExp(id) {
      console.log(22)
      // 点击小区获取到code然后得到数据渲染所属楼栋
      const { data } = await getBuildingApi({ community_code: id })
      console.log(data)
      this.lift = data.data
      //   project_code: ''
      // }
      const res = await getExpensesByComIdApi({ community_code: id })
      console.log(res.data.data)
      this.houseArr = res.data.data// 拿到房产信息,遍历数据
      if (res.data.data[0]) {
        // 拿到res的code接口,然后调用收费项目,渲染数据
        const res2 = await getProjectApi({ community_code: res.data.data[0].community_code })
        // console.log(res2)
        this.project = res2.data.data
      }
    },
    async  liftChange(id) {
      const { data } = await getBuildingCodeApi({ building_code: id })
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
